<template>
    <div class="ele-design-prop" :class="{ 'disabled': !isEditItem, 'active': pinProp, 'active-float': isActive }" ref="jformprop">
        <div class="ele-design-prop-body">
            <div v-if="isActive || pinProp" class="page-builder-panel-collapse fa fa-chevron-right" @click="handleMenuHide"></div>
            <!--<div class="prop-tab-content prop-tab-content-style" v-show="propTab == 'style'" style="padding-top: 0px;">
                <div style="display:flex;flex-flow:column;width:330px;">
                    <div class="elem-node-header">
                        <div class="elem-node-tab" :class="{ 'active': styleTab === 'normal' }"
                             @click="styleTab = 'normal'"><span v-html="currentEleName"></span> 样式</div>
                        <div class="elem-node-tab" :class="{ 'active': styleTab === 'hover' }"
                             @click="styleTab = 'hover'"><span v-html="currentEleName"></span> 悬浮样式</div>
                    </div>
                    <div v-if="currentEleData" style="width:330px;flex: 1;overflow-y: auto;">
                        <builder-prop-style v-show="styleTab === 'normal'" style="border-top: none;"
                                            :style.sync="styleCommon" :current-ele-data="currentEleData"></builder-prop-style>
                        <builder-prop-style v-show="styleTab === 'hover'" style="border-top: none;"
                                            :style.sync="styleHover" :current-ele-data="_sh"></builder-prop-style>
                    </div>
                    <div style="padding: 10px;text-align: center;">
                        <el-switch v-model="currentEleData._rh" active-text="hover块（子元素都按悬浮样式）"></el-switch>
                    </div>
                </div>
            </div>
            <div class="prop-tab-content" v-show="propTab == 'event'" style="padding-top: 0px;">
                <div style="display:flex;flex-flow:column;width:330px;">
                    <div class="elem-node-header">
                        <div class="elem-node-tab active"><span v-html="currentEleName"></span> 绑定事件</div>
                    </div>
                    <event-tags v-model="currentEleData._evts" :page="currentPage" :page-item-code="currentItem && currentItem.page_item_code"
                                :support="currentEleData._se" style="margin: 10px;"></event-tags>
                    &lt;!&ndash;<div>页面请先保存后，才能设置</div>&ndash;&gt;
                </div>
            </div>-->
            <div class="prop-tab-content" v-if="!isEditPage && propTab === 'data'">
                <c-data-page-sub v-if="currentItem && currentItem.component === 'jzlPageSub'"
                                 :item="currentItem" :pages="pages" :current-page-items="items"></c-data-page-sub>
                <c-data v-else-if="isEditItem" :item="currentItem" :pages="pages" :current-page-items="items" :page="currentPage"
                        v-bind="$attrs"></c-data>
                <div v-else class="prop-empty-tip">请先选择组件</div>
            </div>
            <div class="prop-tab-content" v-if="propTab === 'setting'">
                <!--<c-setting-page v-if="isEditPage" :item="currentEleData"></c-setting-page>-->
                <c-setting v-if="isEditItem" :item="currentItem" :key="currentItem && currentItem.page_item_code"
                           :pages="pages" :current-page-items="items" :page="currentPage" v-bind="$attrs">
                    <c-nav-prop v-if="isComp('jzlNav')" :item="currentItem" :list="items"></c-nav-prop>
                    <c-chart-prop v-if="$putils.isChartComponent(currentItem && currentItem.component)" :item="currentItem" :list="items"></c-chart-prop>
                </c-setting>
                <div v-else class="prop-empty-tip">请先选择组件</div>
            </div>
        </div>

        <div class="page-builder-item-tools">
            <div class="page-builder-item-cell">
                <div class="page-builder-item-tab fa fa-map-pin" :class="{ 'active pin': pinProp }" @click="pinProp = !pinProp"
                      v-tippy="{ arrow: true, placement: 'left' }" content="钉住"></div>
                <!--<span class="page-builder-item-status" v-text="currentItem && currentItem.component"
                      v-tippy="{ arrow: true, placement: 'left' }" :content="currentItem && currentItem.component"></span>-->
                <!--<div class="page-builder-item-status horizontal" v-if="currentItem && currentItem.alias"
                      v-text="currentItem && currentItem.alias"
                      v-tippy="{ arrow: true, placement: 'left' }" :content="currentItem && currentItem.alias"></div>-->
                <div class="page-builder-item-tab" :class="{'active': propTab === 'data'}" v-if="!isEditPage"
                     @click="handleMenuSelect('data')">模块变量</div><!-- @mouseenter="handleMenuEnter('data')" @mouseleave="handleMenuLeave"-->
                <div class="page-builder-item-tab" :class="{'active': propTab === 'setting'}"
                     @click="handleMenuSelect('setting')">模块设置</div><!-- @mouseenter="handleMenuEnter('setting')" @mouseleave="handleMenuLeave"-->
            </div>

            <!--<template v-if="pageType != 1">
                <a href="javascript:;" class="el-icon-top" v-if="!isCurrentFirst" @click.stop="moveUp()"
                   v-tippy="{ arrow: true, placement: 'left' }" content="上移"></a>
                <a href="javascript:;" class="el-icon-bottom" v-if="!isCurrentLast" @click.stop="moveDown()"
                   v-tippy="{ arrow: true, placement: 'left' }" content="下移"></a>
            </template>-->

            <!--<a href="javascript:;" class="el-icon-rank"></a>-->
            <!--<a href="javascript:;" class="el-icon-copy-document" @click.stop="copy()"
               v-tippy="{ arrow: true, placement: 'left' }" content="复制"></a>
            <a href="javascript:;" class="el-icon-delete" @click.stop="remove()"
               v-tippy="{ arrow: true, placement: 'left' }" content="删除"></a>-->

            <!--<div class="page-builder-item-tab fa fa-link" v-if="isTypeEle(currentEleData, 'link')" :class="{'active': propTab === 'link'}"
                 @click.stop="handleChangeTab('link')" v-tippy="{ arrow: true, placement: 'left' }" content="元素链接"></div>-->
            <div class="page-builder-item-cell">
                <!--<div class="page-builder-item-tab" :class="{'active': propTab === 'link'}" v-if="isTypeEle(currentEleData, 'link')"
                     @mouseenter="handleChangeTab('link')">
                    {{ isTypeEle(currentEleData, 'link') ? '元素链接': '' }}
                </div>-->
                <!--<div class="page-builder-item-tab" :class="{ 'active': propTab === 'style' }"
                     @mouseenter="handleMenuEnter('style')" @mouseleave="handleMenuLeave">元素样式</div>
                <div class="page-builder-item-tab" :class="{ 'active': propTab === 'event' }"
                     @mouseenter="handleMenuEnter('event')" @mouseleave="handleMenuLeave">元素事件</div>-->

                <!--<div class="page-builder-item-tab" :class="{'active': propTab === 'pageStyle'}"
                     @click="handleMenuSelect('pageStyle')">整页样式</div>--><!-- @mouseenter="handleMenuEnter('pageStyle')" @mouseleave="handleMenuLeave" -->
            </div>
        </div>
    </div>
</template>

<script>
    import mutil        from '../utils/mutil';
    // import { PageItemCommonStyle } from 'jzl-web-components';

    import cButtonProp  from './ele/button/prop';
    import cPaybtnProp  from './ele/paybtn/prop';
    import cEditorProp  from './ele/editor/prop';
    import cImageProp   from './ele/image/prop';
    import cImageData   from './ele/image/data';
    import cLineProp    from './ele/line/prop';
    import cListProp    from './ele/list/prop';
    import cNavProp     from './ele/nav/prop';
    import cNoticeProp  from './ele/notice/prop';
    import cSliderProp  from './ele/slider/prop';
    import cTextNavProp from './ele/text-nav/prop';
    // import cTitleProp   from './ele/title/prop';
    import cMainnavProp from './ele/mainnav/prop';
    // import cFilterProp  from './ele/filter/prop';
    import cChartProp   from './ele/charts/prop';
    import cDataListProp from './ele/data-list/prop';

    import cData        from './ele/data';
    import cDataPageSub from './ele/data-page-sub';

    import cSetting     from './ele/setting';
    import cSettingPage from './ele/setting-page';
    // import BuilderPropStyle from "./builder-prop-style";

    export default {
        name: "builder-prop",
        props: {
            pageType: {
                type: [ String, Number ],
                default: 1
            },
            //传入一个value，使组件支持v-model绑定
            isEditItem: {
                type: Boolean,
                default: false
            },
            currentItemElCode: String,
            currentIndex: {
                type: Number,
                default: -1
            },
            elemNodes: {
                type: [ Array, Object ],
                default: []
            },
            currentItem: {
                type: [ Object ]
            },
            currentItems: Array,
            currentPage: {
                type: Object
            },
            items: {
                type: Array
            },
            inPinProp: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                nodeTreeSetting: {
                    label: 'name',
                    // children: 'childs'
                },
                propTab: "data",
                currentEleData: {},
                pinProp: false,
                isActive: false,
                styleTab: 'normal',

                // styleCommon: {},
                // styleHover: {},
                pageStyle: {},
                timer: null
                // expandKeys: []
            }
        },
        computed: {
            isCurrentFirst() {
                let itemCode = _.get(this.currentItem, 'page_item_code');
                if(!itemCode) return false;
                let index = _.findIndex(this.currentItems, { page_item_code: itemCode });

                return index === 0;
            },
            isCurrentLast() {
                let itemCode = _.get(this.currentItem, 'page_item_code');
                if(!itemCode || !this.currentItems || !this.currentItems.length) return false;
                let index = _.findIndex(this.currentItems, { page_item_code: itemCode });

                return index === (this.currentItems.length -1);
            },
            /*currentEleName() {
                let name = _.get(this.currentEleData, "_name");
                // let render = _.get(this.currentEleData, "_render");
                // let component = _.get(this.currentEleData, "_node") || _.get(this.currentEleData, "_component");
                let eleName = name || "";

                let iconStyle = mutil.getNodeTypeIcon(this.currentEleData);
                // if(render) {
                //     eleName += `[${ render }]`;
                // }

                eleName = `<i class="${ iconStyle }"></i> ${ eleName }`;
                return eleName;
            }*/
        },
        components: {
            // BuilderPropStyle,
            cButtonProp,
            cPaybtnProp,
            cEditorProp,
            cImageProp,
            cImageData,
            cLineProp,
            cListProp,
            cNavProp,
            cNoticeProp,
            cSliderProp,
            cTextNavProp,
            // cTitleProp,
            cMainnavProp,

            // cFilterProp,
            cChartProp,
            cDataListProp,

            cData,
            cDataPageSub,
            cSetting,
            cSettingPage
        },
        watch: {
            /*currentItemElCode(code) {
                // this.$refs.nodesTree.setCurrentKey(code);
                // this.expandKeys = [ code ];
                this.initElemCurrentNode();
            },*/
            /*'currentEleData._common_style': {
                handler: function(val) {
                    this.eleDataToItemData();
                },
                deep: true
            },*/
            'pinProp'(val) {
                this.$emit("pinPropChange", val)
            },
            /*styleCommon: {
                deep: true,
                handler(val) {
                    if(this.currentEleData) {
                        this.currentEleData._common_style = this.clearDefaultStyleUnit(val);
                    }
                }
            },
            styleHover: {
                deep: true,
                handler(val) {
                    if(this.currentEleData) {
                        this.currentEleData._sh = this.clearDefaultStyleUnit(val);
                    }
                }
            },*/
            /*pageStyle: {
                deep: true,
                handler(val) {
                    if(this.currentPage && this.currentPage.style) {
                        this.currentPage.style._common_style = this.clearDefaultStyleUnit(val);
                    }
                }
            }*/
        },
        mounted() {
            this.pinProp = this.inPinProp
        },
        methods: {
            ...mutil,
            isComp(name) {
                return this.currentItem && this.currentItem.component === name;
            },
            handleMenuSelect(propTab) {
                // if(propTab === 'pageStyle') this.handlePageSetting();
                this.propTab = propTab;
                this.isActive = true;
            },
            handleMenuHide() {
                this.isActive = false;
                this.pinProp = false;
            },
            handleMenuEnter(propTab) {
                /*if(propTab === 'link' && !mutil.isTypeEle(this.currentEleData, 'link')) {
                    return;
                }*/

                if(this.timer) clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    if(propTab === 'pageStyle') this.handlePageSetting();
                    this.propTab = propTab;
                }, 150);
            },
            handleMenuLeave() {
                if(this.timer) {
                    clearTimeout(this.timer);
                    this.timer = null;
                }
            },
            handleSelectEleNodeClick(data) {
                this.$emit('selectElenode', data);
                // this.currentItemElCode = _.get(data, 'code');
            },
            /*initElemCurrentNode() {
                // let node = this.$refs.nodesTree.getNode(this.currentItemElCode);
                let nodeData = this.$utils.getTreeData(this.elemNodes, "code", this.currentItemElCode);
                let currentEleData = _.get(nodeData, 'def');
                this.currentEleData = currentEleData || {};

                if(!this.currentEleData._sh) {
                    this.$set(this.currentEleData, "_sh", {});
                    // this.currentEleData._sh = {};
                }

                if(!this.currentEleData._evts) {
                    this.$set(this.currentEleData, "_evts", []);
                }

                let styleMix = this.$putils.getInitMixStyle(_.cloneDeep(this.currentEleData));

                this.styleCommon = _.get(styleMix, "_common_style");
                this.styleHover = _.get(styleMix, "_sh");
            },*/
            getIndex() {
                let itemCode = _.get(this.currentItem, 'page_item_code');
                if(!itemCode) return -1;
                return _.findIndex(this.currentItems, { page_item_code: itemCode });
            },
            moveUp() {
                let idx = this.getIndex();
                if(idx <= 0) return;
                let ci = this.currentItems.splice(idx, 1);

                this.currentItems.splice(idx -1, 0, ci[0]);
                // this.updateMask();
                this.$emit("eleNodeTreeChange");
            },
            moveDown() {
                let idx = this.getIndex();
                if(idx < 0 || idx >= this.currentItems.length -1) return;
                let ci = this.currentItems.splice(idx, 1);

                this.currentItems.splice(idx +1, 0, ci[0]);
                // this.updateMask();
                this.$emit("eleNodeTreeChange");
            },
            copy() {
                let idx = this.getIndex();

                if(idx < 0) return;

                let orig = _.cloneDeep(this.currentItems[ idx ]);
                let code = this.$utils.getNanoid(10);
                // TODO 需要改变里面所有的 code
                let citem = _.defaultsDeep({
                    page_item_code: code,
                    alias: this._getAlias(code, this.items),
                    project_id: this.projectId,
                    module_name: code,
                    i: code
                }, orig);   // _.merge({}, this.items[index]);

                delete citem.page_item_id;

                let box_style = _.get(citem, "box_style");
                let ele_style = _.get(citem, "ele_style");

                this.resetCode(box_style);
                this.resetCode(ele_style);

                /*if(citem.options && citem.options.length) {
                    for(let i = 0; i < citem.options.length; i++) {
                        citem.options[i].fio_code = this.$utils.getNanoid(10);
                    }
                }*/

                this.currentItems.splice(idx + 1, 0, citem);

                this.$emit("eleNodeTreeChange")
                // this.updateMask();
                // this.$emit("selectItem", citem);
            },
            remove() {
                let idx = this.getIndex();

                if(idx < 0) return;

                this.currentItems.splice(idx, 1);
                // this.updateMask();
                // this.handleSelectItem();
                // this.$forceUpdate();
                this.$emit("selectItem", {});
                this.$emit("eleNodeTreeChange");
            },
            /*eleDataToItemData() {   // 偶然出现BUG, 右侧设置了，实际未生效 currentItem 数据未变，手动同步
                if(!this.currentItem) return;
                let currentEleData = this.getEleDataByCode(this.currentItem.ele_style, this.currentItemElCode);
                if(currentEleData && currentEleData._common_style && this.currentEleData && this.currentEleData._common_style) {
                    _.assign(currentEleData._common_style, this.currentEleData._common_style);
                }
            },*/
            /*getEleDataByCode(obj, code) {

                let eleData = null;
                if(!obj || !code) return null;
                if(obj._code == code) return obj;

                for(let prop in obj) {
                    if(!obj.hasOwnProperty(prop)) continue;
                    /!*if([ '_common_style', '_ext_style', '_code', '_name', '_component' ].indexOf(prop) >= 0) {
                        continue;
                    }*!/
                    if(_.startsWith(prop, "_")) continue;

                    eleData = this.getEleDataByCode(obj[ prop ], code);
                    if(eleData) break;
                }

                return eleData;
            },*/
            /*handlePageSetting() {
                this.isEditItem = true;
                // this.currentItem = this.currentPage;
                // this.currentItems = this.items;

                if(!this.currentPage.style) {
                    this.$set(this.currentPage, "style", {
                        setting: { theme: "" },
                        _common_style: {}
                    });
                }

                let styleMix = this.$putils.getInitMixStyle(_.cloneDeep(_.get(this.currentPage, 'style')));

                this.pageStyle = _.get(styleMix, "_common_style");
                // this.currentEleData = this.currentPage.style;
            }*/
        }
    }
</script>
